<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入vue文件-->
    <script src = "js/vue.js"></script>
</head>
<body>
    <!--创建一个容器-->
    <div id="app">
        <com1></com1>
    </div>
   
    <script>
        /*
           需求： 创建一个局部组件com1, 在com1组件中使用了局部组件com2.
           在根组件(最外层的div)上使用了com1,代码如下
        */
        //创建局部组件com2
        let com2 = {
            template: `我是组件com2
                     <button @click = "fun">我是组件2中的按钮</button>
                ` ,
            methods: {
                fun() {
                   alert("你点我了")  
                }
            },
        }

        //创建组件com1
        let com1 = {
            template: `<div>
                    我是组件com1:
                    <com2></com2>
                </div>`,
            components: {
                com2     //这里注册com2, 因为组件1中用到了com2
            }
        }

        //创建一个控制器，控制容器显示的数据
        let vm = new Vue({
            el: '#app' ,  //控制那个容器
            components:{
                com1       //此处注册com1
            }
        })
    </script>
</body>
</html>